<template>
<div class="addSubject">
    <el-button type="warning" size="mini" style="margin-right:10px;" @click="relevancySubjectShow = true">
        <slot>关联主体</slot>
    </el-button>

    <el-dialog width="30%" title="查询主体" :close-on-click-modal="false" :visible.sync="searchSubjectShow" append-to-body>
        <el-card>
            <el-form :inline="true" width="100%">
                <el-form-item>
                    <el-input type="text" @change.native="filterSubjectForm" v-model="keywords"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.native="filterSubjectForm">查找主体</el-button>
                </el-form-item>
            </el-form>

            <template v-for="(item, index) in SubjectForm">
                <el-card v-if="item.公民身份号码" shadow="never" class="result" @click.native="insertion(item)" :key="index">
                    <h4 class="title"><span><span>姓名:</span>{{ item.姓名 }}-({{ item.性别 }}) </span><el-button type="warning" size="mini" @click.native="filterSubjectForm">选择</el-button></h4>
                    <p><span>公民身份号码:</span>{{ item.公民身份号码 }}</p>
                    <p><span>民族:</span>{{ item.民族 }}</p>
                    <p><span>文化程度:</span>{{ item.文化程度 }}</p>
                    <p><span>职业:</span>{{ item.职业 }}</p>
                    <p><span>居村委名称:</span>{{ item.居村委名称 }}</p>
                    <p><span>地址:</span>{{ item.地址 }}</p>
                    <p><span>文化程度:</span>{{ item.文化程度 }}</p>
                </el-card>
                <el-card v-else shadow="never" class="result" @click.native="insertion(item)" :key="index">
                    <h4 class="title"><span><span>注册号:</span>{{ item.注册号 }}</span><el-button type="warning" size="mini" @click.native="filterSubjectForm">选择</el-button></h4>
                    <p><span>企业名称:</span>{{ item.企业名称 }}</p>
                    <p><span>地址:</span>{{ item.地址 }}</p>
                    <p><span>经营范围:</span>{{ item.经营范围 }}</p>
                    <p><span>成立日期:</span>{{ item.成立日期 }}</p>
                    <p><span>注册资本_万元:</span>{{ item.注册资本_万元 }}</p>
                    <p><span>企业类型:</span>{{ item.企业类型 }}</p>
                    <p><span>企业经济性质:</span>{{ item.企业经济性质 }}</p>
                    <p><span>管辖单位:</span>{{ item.管辖单位 }}</p>
                    <p><span>登记机关:</span>{{ item.登记机关 }}</p>
                    <p><span>企业经济性质:</span>{{ item.企业经济性质 }}</p>
                    <p><span>联系电话:</span>{{ item.联系电话 }}</p>
                    <p><span>企业状态:</span>{{ item.企业状态 }}</p>
                    <p><span>企业经济性质:</span>{{ item.企业经济性质 }}</p>
                    <p><span>经营者身份证号码:</span>{{ item.经营者身份证号码 }}</p>
                    <p><span>负责人:</span>{{ item.负责人 }}</p>
                </el-card>
            </template>
            <div class="dialog-footer" style="float:right;padding:15px 0">
                <el-button type="info" @click="searchSubjectShow = false">关闭查询窗口</el-button>
            </div>
        </el-card>
    </el-dialog>

    <el-dialog title="关联主体" :append-to-body="true" label-width="100px" width="30%" :visible.sync="relevancySubjectShow">
        <el-form :model="form" autocomplete="off">
            <el-form-item label="经营主体">
                <el-input @click.native="searchSubject" v-model="form.subjectName" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="占用面积(亩)">
                <el-input v-model="form.lsSubjectUseArea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年产值(万元)">
                <el-input v-model="form.lsYearValue" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属基地">
                <el-input v-model="form.subjectBase" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="relevancySubjectShow = false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
    name: "",
    props: {
        landCodeT: {
            type: [String, Array],
            required: true
        },
        addType: {
            type: Number,
            default: 0
        }
        // tableData: {
        // 	type: Array
        // }
    },
    data() {
        return {
            typeClass: '个体户',
            keywords: "",
            formLabelWidth: "100px",
            relevancySubjectShow: false,
            searchSubjectShow: false,
            emitForm: {},
            form: {
                subjectName: "",
                lsSubjectUseArea: "",
                lsYearValue: "",
                base: "默认基地",
            },
            params: {
                pageNumber: 1,
                pageSize: 10,
            },
            paging: {},
            SearchFrom: [],
            SubjectForm: [],
            tableData: [],
            List: [],
            SubjectInfoList: [],
            multipleSelection: [],
            AddDialogFormVisible: false,
        };
    },
    computed: {},
    methods: {
        openAdd() {
            this.AddDialogFormVisible = true;
        },
        closeAddModel() {
            this.AddDialogFormVisible = false
        },
        filterSubjectForm() {
            this.SubjectForm = [];
            var keyword = this.keywords;
            if (keyword) {
                fetch("/ku.json")
                    .then((res) => res.json())
                    .then((res) => {
                        res.forEach((item) => {
                            if (item.姓名.indexOf(keyword) != -1) {
                                this.SubjectForm.push(item);
                            }
                        });
                    });

                // fetch('/qy.json')
                //     .then(res => res.json())
                //     .then(res => {
                //         res.forEach((item) => {
                //             this.SubjectForm.push(item)
                //         })
                //     })
            } else {
                this.SubjectForm = [];
            }
        },
        insertion(item) {
            this.form.subjectName = item.姓名 || item.企业名称;
            this.from = item
            this.emitForm = item
            this.searchSubjectShow = false;
        },
        searchSubject() {
            this.searchSubjectShow = true;
        },

        submit() {
            this.$emit('on-success', this.emitForm)
            this.relevancySubjectShow = false
        }
    },
};
</script>

<style lang="scss" scoped>
.result {
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;

    h4 {
        padding-bottom: 15px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 15px;
    }

    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    p {
        line-height: 25px;
    }
}
</style>
